<template>
  <div class="more-container">
    <el-form
      class="topstudentform"
      ref="topstudentform"
      :model="topstudentforms"
      size="small"
      label-width="92px"
      style="margin-top: 10px"
    >
      <el-row>
        <el-col :span="4">
          <el-form-item label-width="0" prop="startTime">
            <el-date-picker
              v-model="topstudentforms.startTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :style="{ width: '93%' }"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="3">
          <el-form-item label-width="0" prop="teamId">
            <el-select
              clearable
              v-model="topstudentforms.teamId"
              placeholder="来源机构"
              multiple
              collapse-tags
              :style="{ width: '93%' }"
            >
              <el-option
                :label="item.title"
                :value="item.id"
                v-for="(item, i) in chartData.allTeam"
                :key="i"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="0" prop="branchId">
            <el-select
              clearable
              v-model="topstudentforms.branchId"
              placeholder="所属机构"
              multiple
              collapse-tags
              :style="{ width: '93%' }"
            >
              <el-option
                :label="item.title"
                :value="item.id"
                v-for="(item, i) in chartData.ownTeam"
                :key="i"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="0" prop="channel">
            <el-select
              clearable
              v-model="topstudentforms.channel"
              placeholder="招生渠道"
              multiple
              collapse-tags
              :style="{ width: '93%' }"
            >
              <el-option
                :label="item.title"
                :value="item.id"
                v-for="(item, i) in channelOptions"
                :key="i"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="0" prop="carType">
            <el-select
              clearable
              v-model="topstudentforms.carType"
              placeholder="培训车型"
              multiple
              collapse-tags
              :style="{ width: '93%' }"
            >
              <el-option
                :label="item.title"
                :value="item.id"
                v-for="(item, i) in gettypeOptions"
                :key="i"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-row>
            <div class="rightbtn">
              <el-button
                type="primary"
                icon="el-icon-search"
                size="small"
                @click="searchlist"
              >
                查询
              </el-button>
              <el-button
                icon="el-icon-refresh-left"
                size="small"
                @click="resetform"
              >
                重置
              </el-button>
            </div>
          </el-row>
        </el-col>
      </el-row>
    </el-form>

    <el-row>
      <el-col :span="12">
        <ve-pie
          :data="chartData.chartAge"
          :height="'500px'"
          :extend="ageRowschartExtend"
          :settings="ageRowschartSettings"
          :title="ageRowstitle"
          style="margin-top: 60px"
        ></ve-pie>
      </el-col>
      <el-col :span="12">
        <ve-pie
          :data="chartData.chartSex"
          :height="'500px'"
          :extend="sexRowschartExtend"
          :settings="sexRowschartSettings"
          :title="sexRowstitle"
          style="margin-top: 60px"
        ></ve-pie>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getSessionStorage } from '@/utils/accessToken'
import { attribute } from '@/api/statistics'
import 'echarts/lib/component/title'
export default {
  components: {},

  data() {
    this.ageRowschartExtend = {
      series: {
        radius: '150',
        center: ['50%', '50%'],
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        formatter: (name) => {
          let data = this.chartData.chartAge.rows
          let total = 0
          for (let i = 0, l = data.length; i < l; i++) {
            if (data[i].title == name) {
              total = data[i].count
            }
          }
          return name + ' ' + total + ' 人'
        },
      },
    }
    this.ageRowschartSettings = {
      area: true,
    }
    this.sexRowschartExtend = {
      legend: {
        orient: 'vertical',
        left: 'left',
        formatter: (name) => {
          let data = this.chartData.chartAge.rows
          let total = 0
          for (let i = 0, l = data.length; i < l; i++) {
            if (data[i].title == name) {
              total = data[i].count
            }
          }
          return name + ' ' + total + ' 人'
        },
      },
      series: {
        radius: '150',
        center: ['50%', '50%'],
      },
    }
    this.sexRowschartSettings = {
      area: true,
    }
    return {
      topstudentforms: {},
      chartData: {},
      gettypeOptions: [],
      channelOptions: [],
      subjectList: [
        { title: '科目一', id: 1 },
        { title: '科目二', id: 2 },
        { title: '科目三', id: 3 },
        { title: '科目四', id: 4 },
      ],
      ageRowstitle: {
        text: '',
        x: '50%', //在图片中的x轴位置 left, right, middle
        y: '10', //在图片中的y轴位置 top, bottom
        textAlign: 'center', //整体（包括 text 和 subtext）的水平对齐 auto, left, right, center
      },
      sexRowstitle: {
        text: '',
        x: '50%', //在图片中的x轴位置 left, right, middle
        y: '10', //在图片中的y轴位置 top, bottom
        textAlign: 'center', //整体（包括 text 和 subtext）的水平对齐 auto, left, right, center
      },
    }
  },

  methods: {
    async getchartData() {
      let params = {}
      if (
        this.topstudentforms.startTime &&
        this.topstudentforms.startTime != ''
      ) {
        params.startTime = this.topstudentforms.startTime[0]
        params.endTime = this.topstudentforms.startTime[1]
      }
      if (
        this.topstudentforms.branchId &&
        this.topstudentforms.branchId != ''
      ) {
        params.branchId = this.topstudentforms.branchId.join(',')
      }
      if (this.topstudentforms.teamId && this.topstudentforms.teamId != '') {
        params.teamId = this.topstudentforms.teamId.join(',')
      }
      if (this.topstudentforms.channel && this.topstudentforms.channel != '') {
        params.channel = this.topstudentforms.channel.join(',')
      }
      if (this.topstudentforms.carType && this.topstudentforms.carType != '') {
        params.carType = this.topstudentforms.carType.join(',')
      }

      let data = await attribute(params)
      if (data.code == '0000') {
        this.chartData = data.data
           this.$set(this.topstudentforms, 'startTime', this.chartData.date)
        let agetotal = 0
        this.chartData.chartAge.rows.forEach((p) => {
          agetotal += p.count
        })
        this.ageRowstitle.text = '年龄分布统计：' + agetotal + '人'
        let sextotal = 0
        this.chartData.chartAge.rows.forEach((p) => {
          sextotal += p.count
        })
        this.sexRowstitle.text = '性别分布统计：' + sextotal + '人'
      }
    },
    searchlist() {
      this.getchartData()
    },
    resetform() {
      this.$refs['topstudentform'].resetFields()
      this.getchartData()
    },
  },
  created() {
    this.getchartData()
  },
  mounted() {
    this.gettypeOptions = getSessionStorage('Options')[1]
    this.channelOptions = getSessionStorage('Options')[14]
  },
}
</script>

<style scoped lang='scss'>
</style>